<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time"></year-month-picker>
          <el-form-item label="所属区域">
            <el-select v-model="area">
              <el-option
                v-for="option in options" :key="option.value"
                :label="option.name" :value="option.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-1 overflow-auto dark-table-wrapper">
        <el-table
          v-loading="loading" :data="lists" height="100%"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white',
            textAlign: 'center'
          }"
          :cell-style="{
            textAlign: 'center'
          }"
        >
          <el-table-column label="行业" prop="col1" width="200">
            <template #default="{ row }">
              <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis({ id: row.id2 }, 'industryCode')">{{row.col1}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="企业名称" prop="enterprise" width="200">
            <template #default="{ row }">
              <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')">{{row.enterprise}}</el-link>
            </template>
          </el-table-column>
          <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
            <template v-if="column.children">
              <el-table-column v-for="child in column.children" :key="child.label" v-bind="child">
                <template v-if="child.children">
                  <el-table-column v-for="cc in child.children" :key="cc.prop" v-bind="cc"></el-table-column>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import TimePicker from '@/mixins/time-picker'
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'energy-efficiency-analysis-comprehensive',
  mixins: [TimePicker, Navigate2enterpriseAnalysis],
  data () {
    return {
      keyword: '',
      loading: false,
      area: '',
      lists: [],
      columns: [
        {
          label: '能耗指标',
          children: [
            {
              label: '综合能源消费量',
              children: [
                {
                  label: '本期',
                  prop: 'col2'
                },
                {
                  label: '同比（%）',
                  prop: 'col3'
                },
              ]
            },
            {
              label: '工业总产值',
              children: [
                {
                  label: '本期',
                  prop: 'col6'
                },
                {
                  label: '同比（%）',
                  prop: 'col7'
                },
              ]
            },
            {
              label: '产值单耗',
              children: [
                {
                  label: '本期',
                  prop: 'col8'
                },
                {
                  label: '同比（%）',
                  prop: 'col9'
                },
              ]
            },
            {
              label: '电耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col10'
                },
                {
                  label: '同比（%）',
                  prop: 'col11'
                },
              ]
            },
            {
              label: '天然气耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col14'
                },
                {
                  label: '同比（%）',
                  prop: 'col15'
                },
              ]
            },
            {
              label: '能源消费总量',
              children: [
                {
                  label: '本期',
                  prop: 'col18'
                },
                {
                  label: '同比（%）',
                  prop: 'col19'
                },
              ]
            },
          ]
        }
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 12,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    energyEnterpriseList () {
      return this.$store.state.energyEnterpriseList
    },
    options () {
      return this.$store.getters['user/districts']
    },
    qs () {
      return {
        keyword: this.keyword,
        time: this.time,
      }
    }
  },
  mounted () {
    this.$store.dispatch('GET_ENTERPRISE_LIST')
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.pagination.total = 300
          this.loading = false
          const energyEnterpriseList = this.energyEnterpriseList
          if (energyEnterpriseList.length === 0) return
          this.lists = [
            ...energyEnterpriseList.map((v, i) => ({
              id: v.id,
              id2: energyEnterpriseList[i].belongIndustry,
              enterprise: energyEnterpriseList[i].name,
              col1: energyEnterpriseList[i].belongIndustryName,
              col2: '-',
              col3: '-',
              col4: '-',
              col5: '-',
              col6: '-',
              col7: '-',
              col8: '-',
              col9: '-',
              col10: '-',
              col11: '-',
              col12: '-',
              col13: '-',
              col14: '-',
              col15: '-',
              col16: '-',
              col17: '-',
              col18: '-',
              col19: '-'
            }))
          ]
        }, 300)
      })
    },
    onSearch () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.getLists()
      })
    },
    onNodeClick () {
      this.onSearch()
    }
  }
}
</script>

<style scoped>

</style>
